<template>
  <div  style="width: 100%; height: 100%">
    <div class="top ">
      <div class="circle animate__animated animate__slideInDown"  v-for="item in state.arr" :style="{left:item*10+'%'}"></div>
    </div>
    <div class="bottom">
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  const state=reactive({
    arr:[0,1,2,3,4,5,6,7,8,9]
  })
</script>
<style lang="scss" scoped>
    $color:rgb(162, 110, 73);
    .bottom{
      background-color: rgb(35, 72, 87);
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    .circle{
        width: 10%;
        height: 60%;
        position: absolute;
        background-color: $color;
        border-radius:0 0 50% 50%/0 0 15% 15%;
        z-index: 1;
        
      }
</style>